<template>
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="fetchData()"
          type="primary"
          size="small">
          查询结果
        </el-button>
        <el-button
          style="float: right;margin-right: 15px"
          @click="handleResetSearch()"
          size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="元器件名称：">
            <el-input style="width: 203px" v-model="listQuery.name" placeholder="元器件名称"></el-input>
          </el-form-item>
          <el-form-item label="SN：">
            <el-input style="width: 203px" v-model="listQuery.sn" placeholder="SN"></el-input>
          </el-form-item>
          <el-form-item label="所属项目：">
            <el-input style="width: 203px" v-model="listQuery.project" placeholder="所属项目"></el-input>
          </el-form-item>
          <el-form-item label="状态：">
            <el-select v-model="electronicStatus" placeholder="未删除" clearable>
              <el-option label="已删除" value="0"> </el-option>
              <el-option label="未删除" value="1"> </el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
    </el-card>

    <el-table
      :data="list"
      v-loading="listLoading"
      style="width: 100%">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="SN">
              <span>{{ props.row.sn }}</span>
            </el-form-item >
            <el-form-item label="名称">
              <span>{{ props.row.name }}</span>
            </el-form-item >
            <el-form-item label="封装">
              <span>{{ props.row.package }}</span>
            </el-form-item >
            <el-form-item label="价格">
              <span>{{ props.row.price }}</span>
              <span>{{ props.row.spec }}</span>
            </el-form-item >
            <el-form-item label="库存">
              <span>{{ props.row.stock }}</span>
            </el-form-item >
            <el-form-item label="位置">
              <span>{{ props.row.position }}</span>
            </el-form-item >
            <el-form-item label="项目">
              <span>{{ props.row.project }}</span>
            </el-form-item >
            <el-form-item label="供货商">
              <span>{{ props.row.supplier }}</span>
            </el-form-item >
          </el-form>
        </template>
      </el-table-column>
      <el-table-column label="名称" prop="name">
        <template slot-scope="scope">{{scope.row.name}}</template>
      </el-table-column>
      <el-table-column label="价格/规格" prop="stock">
        <template slot-scope="scope">
          <p>{{scope.row.price}} / {{scope.row.spec}}</p>
        </template>
      </el-table-column>
      <el-table-column label="库存" prop="stock">
      </el-table-column>
      <el-table-column label="位置" prop="position">
      </el-table-column>
      <el-table-column label="项目/产品" prop="project">
        <template slot-scope="scope">{{scope.row.project}}</template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="300">
        <template slot-scope="scope">
          <el-button @click="handleInStockCart(scope.row)" type="text" size="small">+入库单</el-button>
          <el-button @click="handleOutStockCart(scope.row)" type="text" size="small">+出库单</el-button>
          <el-button @click="handleClickFavoriteAdd(scope.row)" type="text" size="small">收藏</el-button>
          <el-button @click="handleClickEdit(scope.row)" type="text" size="small">编辑</el-button>
          <el-button @click="handleClickDelete(scope.row)" type="text" size="small">删除</el-button>
          <el-button @click="handleJoinBoom(scope.row)" type="text" size="small">+boom单</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="fetchData" />

    <el-dialog title="我的收藏夹" width="30%" :visible.sync="dialogFavoriteVisable">
      <el-form :model="formInline" class="demo-form-inline">
        <el-form-item label="收藏夹">
          <el-tag
            :key="tag"
            v-for="tag in favoriteList"
            closable
            :disable-transitions="false"
            @click="onSelectFavorite(tag)"
            @close="handleFavoriteClose(tag)">
            {{tag}}
          </el-tag>
          <el-input
            class="input-new-tag"
            v-if="inputVisible"
            v-model="inputValue"
            ref="saveTagInput"
            size="small"
            @keyup.enter.native="handleInputConfirm"
            @blur="handleInputConfirm"
            >
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加收藏夹</el-button>
        </el-form-item>
        <el-form-item label="选中">
          <el-tag type="success" v-if="selectFavoriteTag" >{{selectFavoriteTag}}</el-tag>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onFavoriteItemAdd">收藏</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

    <el-dialog
      title="加入boom单"
      :visible.sync="dialogElectronicBoomVisiable"
      width="30%">
      <el-form ref="electronicBoomForm":model="electronicBoom" :rules="rules" label-width="120px">
        <el-form-item label="boom单名称" prop="name">
          <el-select v-model="electronicBoom.name" placeholder="选择项目">
            <el-option
              v-for="item in electronicBoomList"
              :key="item.name"
              :label="item.name"
              :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogElectronicBoomVisiable = false">取 消</el-button>
        <el-button type="primary" @click="handleConfirm('electronicBoomForm')">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>

import {
  getElectronicSearch,
  getElectronicInfo,
  electronicDelete,
  electronicEdit,
  electronicOutCartAdd,
  electronicInCartAdd,
  electronicFavoriteAdd,
  electronicFavoriteDelete,
  electronicFavoriteList,
  electronicFavoriteItemAdd
} from '@/api/electronic'
import fetchallElectronicBoom from '@/api/electronicBoom'
import waves from '@/directive/waves' // waves directive
import Pagination from '@/components/Pagination' // secondary package based on el-pagination

export default {
  name: 'find',
  components: { Pagination },
  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      tableKey: 0,
      list: null,
      listLoading: true,
      total: 10,
      selectRow: null,
      listQuery: {
        name: '',
        project: '',
        sn: '',
        status: 1,
        page: 1,
        limit: 20
      },
      electronicStatus: '',
      dialogDeleteVisible: false,
      dialogFormVisible: false,
      form: {
        sn: null,
        name: null,
        package: null,
        spec: null,
        price: null,
        stock: null,
        delivery: null,
        position: null,
        supplier: null,
        project: null
      },
      projects:[],
      products:[],
      formLabelWidth: '120px',
      favoriteList: [],
      selectFavoriteTag: '',
      inputVisible: false,
      inputValue: '',
      dialogFavoriteVisable: false,
      dialogElectronicBoomVisiable: false,
      electronicBoomList:[],
      electronicBoom:{
        name:'',
        id:null
      },
      rules: {
        name: [
          { required: true, message: '请输入类型名称', trigger: 'blur' }
        ]
      }
    }
  },
  created() {
    this.getElectronicBoomList()
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      if(this.electronicStatus) {
        this.listQuery.status = this.electronicStatus
      }
      getElectronicSearch(this.listQuery).then(response => {
        this.listLoading = false
        this.list = response.data.items
        this.total = response.data.total
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.fetchData()
    },
    handleClickInfo(row) {
      getElectronicInfo(row.sn).then(response => {
      })
    },
    handleClickEdit(row) {
      this.form = row
      this.$router.push({
        path: 'modify',
        query: row
      })
    },
    handleClickDelete(row) {
      this.$confirm('此操作将永久删除该元器件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          electronicDelete(row.sn).then(response => {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.handleFilter()
          })
        }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            })
          })
    },
    handleInStockCart(row) {
      var sn = row.sn
      electronicInCartAdd(sn).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
      })
    },
    handleOutStockCart(row) {
      var sn = row.sn
      electronicOutCartAdd(sn).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
      })
    },


    showInput() {
      this.inputVisible = true;
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus();
      });
    },
    handleInputConfirm() {
      let inputValue = this.inputValue;
      if (inputValue) {
        electronicFavoriteAdd(inputValue).then(response => {
          this.$message({
            type: 'success',
            message: response.message
          })
          this.favoriteList.push(inputValue);
        })
      }
      this.inputVisible = false;
      this.inputValue = '';
    },
    handleClickFavoriteAdd(row) {
      this.selectRow = row
      electronicFavoriteList().then(response => {
        this.favoriteList = response.data.items
      })
      this.dialogFavoriteVisable = true
    },
    onSelectFavorite(tag) {
      this.selectFavoriteTag = tag
    },
    handleFavoriteClose(tag) {
      this.$confirm('此操作将删除收藏夹和收藏夹下收藏的元器件，是否删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          electronicFavoriteDelete(tag).then(response => {
            this.$message({
              type: 'success',
              message: response.message
            })
            this.favoriteList.splice(this.favoriteList.indexOf(tag), 1);
          })
        })
    },
    onFavoriteItemAdd() {
      var sn = this.selectRow.sn
      var name = this.selectFavoriteTag
      electronicFavoriteItemAdd(name, sn).then(response => {
        this.$message({
          type: 'success',
          message: response.message
        })
      })
      this.dialogFavoriteVisable = false
    },

    handleConfirm(electronicBoomForm) {
      console.log(electronicBoomForm)
    },
    handleJoinBoom(row) {
      this.dialogElectronicBoomVisiable = true
    },
    getElectronicBoomList(){
      fetchallElectronicBoom().then(response => {
        this.electronicBoomList = response.items
      })
    }
  }
}
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
</style>

